<template>
  <div>
  <div class="content tl mb50">
    <div class=" clearfix bg-fff">
      <div class="fl ww2 mt-10 pd-15">
        <div class="clearfix my-14-33">
          <div class="fl">收货人:王柏川</div>
          <div class="fr">113898776789</div>
        </div>
        <div class="mt-10 my-14-33 fl">地址：安徽省合肥市蜀山区望江西路温馨家园1111</div>
      </div>
      <img src="./images/adresscolor-bg.svg" width="100%" alt="">
      <div class="clearfix my-14-55 mt-10 pd-15 pt0">
        <div class="fl">订单状态</div>
        <div class="fr my-14-f7red">待收货</div>
      </div>
    </div>
    <div class="bg-fff">
      <div class="pd-15  my-14-55 fl shoplist">商品列表</div>
      <ul>
        <li class="clearfix pd-15 my-line">
          <div class="fl w1 pl-14">
            <img class="my-img" src="./images/goodimg.png">
          </div>
          <div class="fl w2 pl-14 mt-10">
            <div class="my-15-33 two-line pl-10">53茅台王子酒500ml</div>
            <!-- <div class="clearfix pdtb-15" v-if="item.refund_status">
             <div class="fl my-13-97 ">{{childItem.specification}}</div>
             <!--退换状态：SELLER_REFUSE_BUYER退换失败 SUCCESS退换成功 WAIT_SELLER_AGREE卖家处理中-->
            <!-- <div class="fr  my-13-yellow" v-if="item.refund_status == 'SELLER_REFUSE_BUYER'">退换失败</div>
            <div class="fr  my-13-yellow" v-if="item.refund_status == 'SUCCESS'">退换成功</div>
            <div class="fr  my-13-yellow" v-if="item.refund_status == 'WAIT_SELLER_AGREE'">卖家处理中</div>
            <div class="fr  my-13-yellow" v-if="item.refund_status == 'WAIT_ADMIN_AGREE'">等待管理员审核</div>
          </div> -->
            <div class="clearfix my-13-22 pl-10">
              <div class="fl my-14-f7red">￥118/瓶</div>
              <div class="fr pr-13 my-14-25">x1</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="pd-15 bg-fff">
      <div class="clearfix  my-13-55 lh16">
        <div class="fl ">小计</div>
        <div class="fr my-13-f7red">85.00<span class="my-13-55">元</span></div>
      </div>
      <div class="clearfix bg-fff my-13-55 lh16">
        <div class="fl ">使用红包</div>
        <div class="fr my-13-f7red">10<span class="my-13-55">元</span></div>
      </div>
      <div class="clearfix bg-fff my-13-55 lh16">
        <div class="fl ">送积分</div>
        <div class="fr my-13-f7red">0<span class="my-13-55">积分</span></div>
      </div>
      <div class="clearfix bg-fff my-line my-13-55 lh16 pb5">
        <div class="fl ">运费</div>
        <div class="fr my-13-f7red">0<span class="my-13-55">元</span></div>
      </div>
      <div class="clearfix bg-fff lh16 pt5">
        <div class="fr my-14-f7red">
          订单总额：85.00元
        </div>
      </div>
    </div>



    <div class="mt-10 bg-fff pd-15 my-13-97">
      <div class="clearfix mt-10">
        <div class="fl"> 订单编号：</div>
        <div class="fr">23543543135686535</div>
      </div>
      <div class="clearfix mt-10">
        <div class="fl">订单时间</div>
        <div class="fr">23543543135686535</div>
      </div>
      <div class="clearfix mt-10">
        <div class="fl">付款方式</div>
        <div class="fr">线上付款</div>
      </div>
      <div class="clearfix mt-10">
        <div class="fl">联系电话:</div>
        <div class="fr">0551-666900</div>
      </div>
      <div class="clearfix mt-10">
        <div class="fl">门店名称:</div>
        <div class="fr">政务区店</div>
      </div>
    </div>
    <div class="mt-10 bg-fff pd-15 my-13-77 clearfix">
      <div class="fl my-13-77">备注:</div>
      <div class="fr my-13-99">门店自提</div>
    </div>
  </div>
    <div class="bottom">
      <span class="btn-small cancel">取消订单</span>
      <span class="btn-small pay ml-10"><router-link :to="{ name: 'my_pingjia', params: {} }">立即评价</router-link></span>
      <span class="btn-small pay ml-10">立即付款</span>
    </div>
  </div>
</template>

<script>
  export default {}
</script>

<style scoped>
  .tl{
    text-align:left;
  }
  .pt0{ padding-top:0 !important; }
  .pd-15{
    padding:.5rem .75rem;
  }
  .get_get{
    border:1px solid #f74c4g;
    border-radius:1.5rem;
    font-size:.6rem;
    color:#ffffff;
    padding:.2rem 1rem;
    background-color:#f74c4e;
  }
  .p10-15{ padding:.4rem .75rem; }
  .ml-10{
    margin-left:.5rem;
  }
  .bottom{
    width:100%;
    position:absolute;
    border-top:1px solid #e7e7e7;
    bottom:0;
    left: 0;
    text-align: right;
    padding:0 .75rem;
    height:2.2rem;
    line-height:2.2rem;
    background: #fff;
  }
  .shoplist{
    background-color:#f5f5f5;
    width:100%;
    text-align:left;
  }
  .pdlr-15{
    padding:0 .75rem;
  }
  .pdlrb-15{
    margin:0 .75rem;
    padding:0 0 .75rem;
  }
  .pdtb-mlr{
    padding:.75rem 0;
    margin:0 .75rem;
  }
  .mt-20{
    margin-top:1.1rem;
  }
  .my-14-33{
    font-size:.7rem;
    color:#333333;
  }
  .my-14-55{
    font-size:.7rem;
    color:#555555;
  }
  .my-13-55{
    font-size:.65rem;
    color:#555555;
  }
  .my-14-f7red{
    font-size:.7rem;
    color:#f74c4e;
  }
  .my-13-f7red{
    font-size:.65rem;
    color:#f74c4e;
  }
  .my-15-33{
    font-size:.75rem;
    color:#333333;
  }
  .my-13-99{
    font-size:.65rem;
    color:#999999;
  }
  .my-13-77{
    font-size:.65rem;
    color:#777777;
  }
  .ww2{
    width:100%;
  }
  .state-bg{
    background-image:linear-gradient(-180deg, #f43939 0%, #e80013 91%);
    box-shadow:inset 0 0 0 0 #e6eaed;
  }
  .ml-10{
    margin-left:.5rem;
  }
  .pdtb-15{
    padding:.25rem 0;
  }
  .my-img{
    width:4rem;
    height:4rem;
  }
  .w1{
    width:4.75rem;
  }
  .w2{
    width:calc(100% - 4.75rem);
    text-align:left;
  }
.lh16{
  line-height:1.8;
}
  .pb5{ padding-bottom:.25rem;}
  .pt5{ padding-top:.25rem;}
  .btn-small{
    display:inline-block;
    border-radius:1rem;
    font-size:.6rem;
    padding: .3rem .8rem;
    line-height:1;
  }
  .btn-small.pay{
    color:#ffffff;
    background-color: #F74C4E;
  }
.btn-small.cancel{
    border: 1px solid #cecece;
    color:#777777;
  }
  .btn-small a{
    color: inherit;
  }
  .mb50{ margin-bottom:2.5rem}
</style>
